<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        原理就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的

        常见的需要适配的宽度
            超小屏幕(手机)  <768px
            小屏设备(平板) 768px ~ 992px
            中等屏幕(桌面显示器) 992px ~ 1200px
            宽屏设备(大桌面显示器) >=1200px
     -->
</body>
</html>